<template>
  <div class="ztindex">
   <div class="top">
      <div class="seek"><img src="../../images/icon-faxian-search.png" alt=""></div>
      <h1>分类</h1>
   </div>


   <div class="title clearfix">
      <div><img src="../../images/icon_chanpingxiangqing_2.png" alt=""></div>
      <div><h2>魅力彩妆</h2></div>
      <div><img src="../../images/icon_chanpingxiangqing_2.png" alt=""></div>   
   </div>
   <div class="classify">
      <div class="btn">
        <img src="../../images/icon_huazhuang.png" alt="">
        <p>化妆</p>
      </div>
      <div class="btn">
        <img src="../../images/icon_fendi.png" alt="">
        <p>粉底</p>
      </div>
      <router-link to="blusher">
        <div class="btn">
          <img src="../../images/icon_saihong.png" alt="">
          <p>腮红</p>
        </div>
      </router-Link>
      
      <div class="btn">
        <img src="../../images/icon_yancai.png" alt="">
        <p>眼彩</p>
      </div>
      <div class="btn">
        <img src="../../images/icon_meibi.png" alt="">
        <p>眉笔</p>
      </div>
   </div>
   <div class="title clearfix">
      <div><img src="../../images/icon_chanpingxiangqing_2.png" alt=""></div>
      <div><h2>魅力彩妆</h2></div>
      <div><img src="../../images/icon_chanpingxiangqing_2.png" alt=""></div>   
   </div>
   <div class="classify">
      <div class="btn">
        <img src="../../images/icon_huazhuang.png" alt="">
        <p>化妆</p>
      </div>
      <div class="btn">
        <img src="../../images/icon_fendi.png" alt="">
        <p>粉底</p>
      </div>
      <div class="btn">
        <img src="../../images/icon_saihong.png" alt="">
        <p>腮红</p>
      </div>
      <div class="btn">
        <img src="../../images/icon_yancai.png" alt="">
        <p>眼彩</p>
      </div>
      <div class="btn">
        <img src="../../images/icon_meibi.png" alt="">
        <p>眉笔</p>
      </div>
   </div>
   <Bottomnav :navflag3="navflag"></Bottomnav>
  </div>
</template>
<script>
import Bottomnav from "../../components/bottomnav"
export default {
  name:'tindex',
  data(){
      return{
        navflag:true
      }
  },
  components:{
      Bottomnav
  }
}
</script>
<style lang="less" scoped>
.ztindex{
    text-align: center;

  background:#fff;
}
.top{
  width:100%;
  height:126/75rem;
  background:#ff406f;

  h1{
      color:#fff;
      font-size:40/75rem;
      padding-top:36/75rem;
    }

  .seek{
    // float:left;
    position:absolute;
    margin-left:20/75rem;
    padding-top:20/75rem;
  }
}


.title{
  width:240/75rem;
  margin:0 auto;

  h2{
  font-size:32/75rem;
  padding:34/75rem 0;
  }

  div{
    float:left;
    padding-right:20px;
  }
}
.classify{
  // position:absolute;
  width:714/75rem;
  height:338/75rem;
  // border:solid 1px black; 
  border-radius:16/75rem;
  // box-shadow: 5px -5px 30px #888888;
  background:#fff;
  top:168/75rem;
  left:0;
  right:0;
  margin: 0 auto;
  box-shadow:0 0 20px #dfdfdf;

  .btn{
    width:60/75rem;
    height:120/75rem;
    float:left;
    margin:22/75rem 58/75rem 10/75rem 58/75rem;

    img{
      width:60/75rem;
      height:83/75rem;
    }
  }

  p{
    font-size:24/75rem;
  }

}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}
</style>
